<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
</head>
<body>
<!--1、盒模型的概念
为了更好布局html二面，w3c将 每一个元素都抽象一个一个盒子模型，嗯描述大小以及其它属性，引入了盒模型概念
2.盒模型的类型：
2.1 标准盒模型
2.2 IE盒模型
3.盒模型的组成部分
content 内容
padding 内边距
border 边框
margin 外边距
-->
    <style>
        html,body{
            padding: 0;
            margin: 0;
        }
        .content{
            width: 30px;
            height: 200px;
            background-color: #333;
            color: white;
            margin-left: 100px;
            padding-left: 100px;
            margin-top: 100px;
        }

    </style>
    <div class="content">
        这是一个典型的盒模型
    </div>
    <p>这是一个段落标签</p>
    <style>
        .hplo{
            background-color: yellow;
        }

        .hplo span{
            border: 3px solid red;
            margin: 50px;
            background-color: black;
            color: white;
            display: inline-block;
            /*padding: 50px;*/
        }
    </style>
    <div class="hplo">
        <span>这是一个长久的发展计划</span>
        <span style="margin-left: 200px">好久不见</span>

    </div>
    <!--溢出-->
    <style>
        .char{
            background-color: green;
            color: cornflowerblue;
            width: 100px;
            /*overflow: hidden;*/
            /*overflow:hidden 剪掉溢出的部分*/
            /*overflow: auto;*/
            /*浏览器自行处理 有溢出内容显示滚动条*/
            /*overflow: scroll;*/
            /*不管是否溢出都显示滚动条 而且是上下两条*/
            overflow-x:scroll;
        }
    </style>
    <div class="char">
        1234567811223456712233455
    </div>
    <!--元素的可见性-->
    <style>
        .nav-header{
            height: 100px;
            background-color: red;
            /*visibility: hidden;*/
            display: none;
        }

        .nav-footer {
            height: 200px;
            background-color: blue;
        }
    </style>
    <div style="border: 10px black solid">
        <div class="nav-header">

        </div>
        <div class="nav-footer">

        </div>
    </div>
</body>
</html>